<template>
	<view class="page">
		<view class="tab-box">
			<u-tabs :list="list" @click="click" lineWidth="0" :activeStyle="{ color: '#3662EC' }"></u-tabs>
		</view>
		<!-- 余量监测 -->
		<view class="content" v-if="index == 0">
			<view class="btns">
				<view class="btn" @click="btnClick0">
					<u-icon name="error-circle-fill" color="#F21E46" size="22"></u-icon>
					<view class="text">余量报警</view>
					<view class="badge-box">
						<u-badge bgColor="#F21E46" max="99" value="77"></u-badge>
					</view>
				</view>
				<view class="btn" @click="btnClick1">
					<u-icon name="order" color="#3662EC" size="22"></u-icon>
					<view class="text">余量报警</view>
					<view class="badge-box">
						<u-badge bgColor="#3662EC" max="99" value="77"></u-badge>
					</view>
				</view>
			</view>
			<!-- map -->
			<view class="map">
				<map style="width: 100%; height: 99%;" latitude="32.019096" longitude="120.271931" scale=14
					:markers="makers" @callouttap="callouttap"></map>
			</view>



		</view>
		<!-- 补液派单 -->
		<view class="content content1" v-if="index == 1">
			<view class="step0">
				<u-steps :current="1" activeColor="#3662EC">
					<u-steps-item title="派单" desc="10:30"></u-steps-item>
					<u-steps-item title="派单" desc="10:35"></u-steps-item>
					<u-steps-item title="验收" desc="11:40">
						<text class="slot-icon" slot="icon">运</text>
					</u-steps-item>
				</u-steps>
			</view>

			<view class="step1">
				<u-steps :current="1" activeColor="#3662EC" direction="column" dot inactiveColor="#AAAAAA">
					<u-steps-item title="派单" desc="2070-10-07 22:04:17"></u-steps-item>
					<u-steps-item title="派单" desc="2070-10-07 22:04:17"></u-steps-item>
					<u-steps-item title="验收" desc="2070-10-07 22:04:17">
						<text class="slot-icon" slot="icon">运</text>
					</u-steps-item>
				</u-steps>
			</view>




		</view>

		<u-popup :show="taskShow" @close="taskClose" mode="center" round=10 safeAreaInsetBottom="false"
			customStyle="top: -320rpx;width: 660rpx;padding: 20rpx 30rpx 30rpx 20rpx;">
			<view class="popContent">
				<view class="table">
					<Table :thList="thList" :tdList="tdList" border="outer" isRadius theadBgColor="#D7E0FB" />
				</view>
				<view class="btn">
					<u-button text="关闭" shape="circle" color="#D8D8D8" @click="taskShow = false"></u-button>
				</view>


			</view>
		</u-popup>

		<u-popup :show="markerShow" mode="center" round=10 @close="markerShow = false" :overlay="false"
			customStyle="position:absolute;left:30rpx;top:300rpx;padding:20rpx 30rpx 20rpx 20rpx;box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.3);">
			<view class="popContent1">
				<view class="text">
					<u-text :text="deviceInfo.name" margin="0 0 10rpx 0"></u-text>
					<u-text text="设备" color="#3662EC" lineHeight=30></u-text>
					<u-text :text="'编号：' + deviceInfo.index + 'L'" lineHeight=20></u-text>
					<u-text :text="'容量：' + deviceInfo.volume + 'L'" lineHeight=20></u-text>
					<u-text :text="'剩余：' + deviceInfo.remain + 'L'" lineHeight=20></u-text>
				</view>
				<view class="btn">
					<u-button text="补液" shape="circle" color="#3662EC"></u-button>
				</view>


			</view>
		</u-popup>


	</view>
</template>
<script>
export default {
	data() {
		return {
			list: [
				{ name: '余量监测' },
				{ name: '补液派单' },
			],
			index: 0,
			taskShow: false,
			thList: [
				{ index: 0, content: '序号' },
				{ index: 1, content: '加油站名称' },
				{ index: 2, content: '设备编号' },
				{ index: 3, content: '余量(升)' },
				{ index: 4, content: '余量百分比' },
			],
			tdList: [
				{
					index: 0,
					data: [
						{ index: 0, content: '1' },
						{ index: 1, content: '海巷路站' },
						{ index: 2, content: '000001' },
						{ index: 3, content: '600L' },
						{ index: 4, content: '10%' },
					]
				},
				{
					index: 1,
					data: [
						{ index: 0, content: '2' },
						{ index: 1, content: '中国石油' },
						{ index: 2, content: '000002' },
						{ index: 3, content: '300L' },
						{ index: 4, content: '5%' },
					]
				},
			],
			makers: [
				{
					id: 0,
					latitude: 32.019096,
					longitude: 120.271931,
					width: 50,
					height: 50,
					iconPath: '/static/map/circle_r.png',
					zIndex: 10,
					callout: {
						content: '80%',
						color: '#ffffff',
						bgColor: 'red',
						fontSize: '32rpx',
						anchorX: '0rpx',
						anchorY: '76rpx',
						display: 'ALWAYS'
					}
				},
				{
					id: 1,
					latitude: 32.011567,
					longitude: 120.263435,
					width: 50,
					height: 50,
					iconPath: '/static/map/circle_b.png',
					callout: {
						content: '10%',
						color: '#ffffff',
						bgColor: 'red',
						fontSize: '32rpx',
						anchorX: '0rpx',
						anchorY: '76rpx',
						display: 'ALWAYS'

					},
				},
			],
			markerShow: false,
			deviceInfo: {
				name: '中国石油海巷路',
				index: '000001',
				volume: 8888,
				remain: 333
			}
		}
	},
	methods: {
		click(item) {
			this.index = item.index
		},
		btnClick1() {
			this.taskShow = true
		},
		callouttap(e) {
			this.markerShow = true
			const markerId = e.detail.markerId
			if (markerId == 0) {
				this.deviceInfo.name = 'aaaa'
			} else {
				this.deviceInfo.name = 'bbbb'
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.tab-box {
	background-color: white;
	padding-left: 20rpx;
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
}

.btns {
	padding: 20rpx 40rpx;
	display: flex;

	.btn {
		padding: 20rpx;
		border-radius: 10px;
		display: flex;
		background-color: white;
		align-items: center;
		width: max-content;
		margin-right: 20rpx;
	}

	.text {
		font-size: 14px;
		margin-right: 10rpx;
	}
}


.popContent .btn {
	width: 300rpx;
	display: flex;
	justify-content: center;
	margin: 30rpx auto 0 auto;
}

.page {
	display: flex;
	flex-direction: column;

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;

		.map {
			height: 100%;
		}
	}

}

.popContent1 .btn {
	width: 200rpx;
	display: flex;
	justify-content: center;
	margin: 20rpx auto 0 auto;
}

// content1
.content1 {
	padding: 20rpx 40rpx;

	.step0 {
		border-radius: 10px;
		background-color: white;
		padding: 40rpx 0;
	}

	.step1 {
		margin-top: 100rpx;
		height: 400rpx;

		::v-deep .u-steps-item__content {
			height: 200rpx !important;

			.u-text {
				flex: 0 !important;
			}
		}

		::v-deep .u-steps-item__wrapper {
			background-color: #F4F5F7 !important;
		}

		::v-deep .u-text__value--main {
			color: #3662EC !important;

			+.u-text__value--tips {
				color: #3662EC !important;
			}
		}
	}
}
</style>
